html {
  height: 100%;
  overflow: hidden;
}
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
p {
  margin: 0;
}
#bgm {
  background: url(../img/bgmusic.svg) no-repeat;
  width: 1.875rem;
  height: 1.875rem;
  background-size: 100% 100%;
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 1000;
  animation: xuan 1s infinite;
  -webkit-animation: xuan 1s infinite;
}
@keyframes xuan {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(36deg);
  }
  20% {
    transform: rotate(72deg);
  }
  30% {
    transform: rotate(108deg);
  }
  40% {
    transform: rotate(144deg);
  }
  50% {
    transform: rotate(180deg);
  }
  60% {
    transform: rotate(216deg);
  }
  70% {
    transform: rotate(252deg);
  }
  80% {
    transform: rotate(288deg);
  }
  90% {
    transform: rotate(324deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes xuan {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(36deg);
  }
  20% {
    transform: rotate(72deg);
  }
  30% {
    transform: rotate(108deg);
  }
  40% {
    transform: rotate(144deg);
  }
  50% {
    transform: rotate(180deg);
  }
  60% {
    transform: rotate(216deg);
  }
  70% {
    transform: rotate(252deg);
  }
  80% {
    transform: rotate(288deg);
  }
  90% {
    transform: rotate(324deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
#page_one {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(../img/bg11.jpg) no-repeat;
  background-size: 100% 100% ;
  display: none;
  overflow: hidden;
}
#list {
  position: absolute;
  width: 100%;
  height: 100%;
}
#list li {
  display: none;
  transform: scale(1.5);
  -webkit-transform: scale(1.5);
  transition: 1s;
  width: 7.125rem;
  height: 10.875rem;
  position: absolute;
}
img{
	width: 100%;
	height: 100%;
}
#list li:nth-child(1) {
  top: 15.1875rem;
  left: 6.6875rem;
  /*background: url(../img/chuan11.png);*/
  background-size: 100% 100% ;
  z-index: 1;
}
#list li:nth-child(2) {
  top: 10.6875rem;
  left: 1.25rem;
  /*background: url(../img/boli11.png);*/
  background-size: 100% 100% ;
  z-index: 2;
}
#list li:nth-child(3) {
  top: 3.9375rem;
  left: 4.1875rem;
  /*background: url(../img/bg2.png);*/
  background-size: 100% 100% ;
  z-index: 3;
}
#list li:nth-child(4) {
  top: 6.75rem;
  left: -1.5rem;
  /*background: url(../img/bj5.png);*/
  background-size: 100% 100% ;
  z-index: 4;
}
#list li:nth-child(5) {
  top: 13.5rem;
  left: 3.6875rem;
  /*background: url(../img/bg1.png);*/
  background-size: 100% 100% ;
  z-index: 5;
}
#list li:nth-child(6) {
  top: 3.1875rem;
  left: 1rem;
  /*background: url(../img/xi.png);*/
  background-size: 100% 100% ;
  z-index: 6;
}
#list li:nth-child(7) {
  top: 3.9375rem;
  left: 9.625rem;
  /*background: url(../img/bg9.png);*/
  background-size: 100% 100% ;
  z-index: 7;
}
#list li:nth-child(8) {
  top: 10.4375rem;
  left: 11.8125rem;
  /*background: url(../img/bg8.png);*/
  background-size: 100% 100% ;
  z-index: 8;
}
#list li:nth-child(9) {
  top: 5rem;
  left: 6.6875rem;
  /*background: url(../img/bg6.png);*/
  background-size: 100% 100% ;
  z-index: 9;
}
#list li:nth-child(10) {
  top: 3.375rem;
  left: 12.5rem;
  /*background: url(../img/bg7.png);*/
  background-size: 100% 100% ;
  z-index: 10;
}
#list li:nth-child(11) {
  top: 7.1875rem;
  left: 14.75rem;
  /*background: url(../img/bg4.png);*/
  background-size: 100% 100% ;
  z-index: 11;
}
#list li:nth-child(12) {
  top: 13.3125rem;
  left: 9.1875rem;
  /*background: url(../img/bg3.png);*/
  background-size: 100% 100% ;
  z-index: 12;
}
#list li:nth-child(13) {
  width: 10.6875rem;
  height: 8.875rem;
  top: 5.875rem;
  left: 3rem;
  /*background: url(../img/bi2.png);*/
  -webkit-transform: rotate(90deg) scale(1.5);
  transform: rotate(90deg) scale(1.5);
  background-size: 100% 100% ;
  z-index: 13;
}
#list li:nth-child(14) {
  width: 20.0625rem;
  height: 5.375rem;
  top: 0rem;
  left: -0.0625rem;
  z-index: 14;
}
#list li:nth-child(14) .zi {
  padding: 0.4375rem 0.9375rem;
  text-align: center;
}
.zi p {
  font-size: 0.875rem;
  line-height: 1.3125rem;
  font-family: arial;
}
#next {
  opacity: 0;
  transition: 1s;
  position: absolute;
  width: 4.8125rem;
  height: 10.75rem;
  left: 7.9375rem;
  bottom: -20%;
  background: url(../img/next.png) no-repeat;
  background-size: 100% 100% ;
}
#page_two {
  width: 100%;
  height: 100%;
  background: url(../img/bg11.jpg) no-repeat;
  background-size: 100% 100% ;
  display: none;
  position: relative;
  overflow: hidden;
}
#list1 {
  position: absolute;
  width: 100%;
  height: 100%;
}
#list1 li {
  opacity: 0;
  transition: 1s;
  width: 26.25rem;
  height: 39.625rem;
  position: absolute;
  display: none;
}
#list1 li:nth-child(1) {
  top: -12.0625rem;
  left: -6.625rem;
  /*background: url(../img/bg3.png);*/
  transform: rotateZ(12deg) scale(1.5);
  -webkit-transform: rotateZ(12deg) scale(1.5);
  background-size: 100% 100% ;
  z-index: 1;
}
#list1 li:nth-child(2) {
  top: -9.5rem;
  left: 4.6875rem;
  /*background: url(../img/bg6.png);*/
  transform: rotateZ(46deg) scale(1.5);
  -webkit-transform: rotateZ(46deg) scale(1.5);
  background-size: 100% 100% ;
  z-index: 2;
}
#list1 li:nth-child(3) {
  top: 2.4375rem;
  left: 4.8125rem;
  /*background: url(../img/bg4.png);*/
  transform: rotateZ(332deg) scale(1.5);
  -webkit-transform: rotateZ(332deg) scale(1.5);
  background-size: 100% 100% ;
  z-index: 3;
}
#list1 li:nth-child(4) {
  top: 2.4375rem;
  left: 4.8125rem;
  /*background: url(../img/bg8.png);*/
  transform: rotateZ(322deg) scale(1.5);
  -webkit-transform: rotateZ(322deg) scale(1.5);
  background-size: 100% 100% ;
  z-index: 4;
}
#list1 li:nth-child(5) {
  top: -6.0625rem;
  left: -9.875rem;
  /*background: url(../img/bg9.png);*/
  transform: rotateZ(330deg) scale(1.5);
  -webkit-transform: rotateZ(330deg) scale(1.5);
  background-size: 100% 100% ;
  z-index: 5;
}
#list1 li:nth-child(6) {
  top: -3.9375rem;
  left: -1.1875rem;
  /*background: url(../img/bg7.png);*/
  transform: rotateZ(17deg) scale(1.5);
  -webkit-transform: rotateZ(17deg) scale(1.5);
  background-size: 100% 100% ;
  z-index: 6;
}
#list1 li:nth-child(7) {
  width: 17rem;
  height: 3.5625rem;
  top: 14.5rem;
  left: 1.375rem;
  background: #fff;
  background-size: 100% 100% ;
  z-index: 7;
}
#list1 li:nth-child(9) {
  width: 17rem;
  height: 3.5625rem;
  top: 14.5rem;
  left: 1.375rem;
  /*background: url(../img/zi2.png);*/
  background-size: 100% 100% ;
  z-index: 8;
}
#list1 li:nth-child(8) {
  width: 18.875rem;
  height: 18.5rem;
  top: 16.5625rem;
  left: 1.25rem;
  /*background: url(../img/bi2.png);*/
  transform: rotateZ(90deg) scale(1.5);
  -webkit-transform: rotateZ(90deg) scale(1.5);
  background-size: 100% 100% ;
  z-index: 9;
}
#list1 li:nth-child(10) {
  width: 4.875rem;
  height: 10.0625rem;
  bottom: -20%;
  left: 1.125rem;
  /*background: url(../img/back.png);*/
  background-size: 100% 100% ;
  z-index: 10;
  animation: rotate  3s infinite;
  -webkit-animation: rotate  3s infinite;
}
#list1 li:nth-child(11) {
  width: 4.875rem;
  height: 10.0625rem;
  bottom: -20%;
  left: 5.9375rem;
  /*background: url(../img/next.png);*/
  background-size: 100% 100% ;
  z-index: 11;
  animation: rotate 3s infinite;
  -webkit-animation: rotate 3s infinite;
}
@keyframes rotate {
  0% {
    transform: rotate(-15deg);
  }
  50% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(-15deg);
  }
}
@-webkit-keyframes rotate {
  0% {
    transform: rotate(-15deg);
  }
  50% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(-15deg);
  }
}
#page_three {
  width: 100%;
  height: 100%;
  background-size: 100% 100% ;
  display: none;
  position: relative;
  overflow: hidden;
}
#page3 {
  height: 100%;
}
#list3 {
  width: 100%;
  height: 100%;
}
#list3 li {
  position: absolute;
  display: none;
  opacity: 0;
}
#list3 li:nth-child(1) {
  width: 45.375rem;
  height: 100%;
  top: 0rem;
  opacity: 0.5;
  left: -12.625rem;
  /*background: url(../img/bg11.png) no-repeat;*/
  background-size: 100% 100%;
  transform: rotateZ(270deg);
  -webkit-transform: rotateZ(270deg);
  z-index: 1;
}
#list3 li:nth-child(2) {
  width: 45.4375rem;
  height: 100%;
  opacity: 0.5;
  top: 0rem;
  left: -39.375rem;
  /*background: url(../img/bg111.png) no-repeat;*/
  background-size: 100% 100%;
  transform: rotateZ(270deg);
  -webkit-transform: rotateZ(270deg);
  z-index: 2;
}
#list3 li:nth-child(3) {
  width: 12.4375rem;
  height: 7rem;
  top: 1.25rem;
  left: 6.75rem;
  z-index: 3;
}
#list3 li:nth-child(4) {
  width: 16.625rem;
  height: 18.25rem;
  bottom: 2%;
  left: -31.25rem;
  /*background: url(../img/dan5.png) no-repeat;*/
  background-size: 100% 100%;
  z-index: 4;
  display: block;
}
#list3 li:nth-child(5) {
  width: 100%;
  height: 100%;
  transition: 4s;
  /*background: url(../img/bg11.jpg) no-repeat;*/
  background-size: 100% 100%;
  z-index: 5;
}
#list3 li:nth-child(6) {
  width: 25.125rem;
  height: 38rem;
  top: -5.75rem;
  left: -3.6875rem;
  transition: 1s;
  /*background: url(../img/bg3.png) no-repeat;*/
  transform: scale(1.5) rotateZ(351deg);
  -webkit-transform: scale(1.5) rotateZ(351deg);
  background-size: 100% 100%;
  z-index: 6;
}
#list3 li:nth-child(7) {
  width: 16.9375rem;
  height: 34.625rem;
  top: 3.5rem;
  left: 13.75rem;
  transition: 2s;
  /*background: url(../img/bi.png) no-repeat;*/
  background-size: 100% 100%;
  z-index: 7;
}
#list3 li:nth-child(8) {
  width: 4.875rem;
  height: 10.0625rem;
  bottom: -20%;
  left: 10rem;
  /*background: url(../img/back.png);*/
  background-size: 100% 100% ;
  z-index: 10;
  animation: rotate  3s infinite;
  -webkit-animation: rotate  3s infinite;
}
#list3 li:nth-child(9) {
  width: 4.875rem;
  height: 10.0625rem;
  bottom: -20%;
  left: 15rem;
  /*background: url(../img/next.png);*/
  background-size: 100% 100% ;
  z-index: 11;
  animation: rotate 3s infinite;
  -webkit-animation: rotate 3s infinite;
}
@keyframes rotate {
  0% {
    transform: rotate(-15deg);
  }
  50% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(-15deg);
  }
}
@-webkit-keyframes rotate {
  0% {
    transform: rotate(-15deg);
  }
  50% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(-15deg);
  }
}
#page_four {
  width: 100%;
  height: 100%;
  background-size: 100% 100% ;
  display: none;
  position: relative;
  overflow: hidden;
}
#page4 {
  height: 100%;
}
#list4 {
  width: 100%;
  height: 100%;
}
#list4 li {
  position: absolute;
  display: none;
  opacity: 0;
}
#list4 li:nth-child(1) {
  width: 47.0625rem;
  height: 100%;
  left: -16.875rem;
  top: 0rem;
  opacity: 0.5;
  /*background: url(../img/hen11.png) no-repeat;*/
  background-size: 100% 100%;
  transform: rotateZ(270deg);
  -webkit-transform: rotateZ(270deg);
  z-index: 1;
}
#list4 li:nth-child(2) {
  width: 47.125rem;
  height: 100%;
  left: -43.625rem;
  top: 0rem;
  opacity: 0.5;
  /*background: url(../img/hen1.png) no-repeat;*/
  background-size: 100% 100%;
  transform: rotateZ(270deg);
  -webkit-transform: rotateZ(270deg);
  z-index: 2;
}
#list4 li:nth-child(4) {
  width: 17.375rem;
  height: 2.875rem;
  left: 2.8125rem;
  top: 0rem;
  z-index: 4;
}
#list4 li:nth-child(3) {
  width: 11.4375rem;
  height: 3.0625rem;
  left: 3rem;
  top: 0rem;
  z-index: 3;
}
#list4 li:nth-child(5) {
  width: 14.6875rem;
  height: 17.1875rem;
  left: -16.625rem;
  bottom: 10%;
  /*background: url(../img/dan8.png) no-repeat;*/
  background-size: 100% 100%;
  z-index: 5;
}
#list4 li:nth-child(6) {
  width: 23.5625rem;
  height: 100%;
  left: -1.75rem;
  top: 0rem;
  transition: 3s;
  /*background: url(../img/hou1.png) no-repeat;*/
  background-size: 100% 100%;
  z-index: 6;
}
#list4 li:nth-child(7) {
  width: 26.25rem;
  height: 39.625rem;
  left: -5.0625rem;
  transition: 1s;
  top: -6.6875rem;
  /*background: url(../img/bg8.png) no-repeat;*/
  background-size: 100% 100%;
  transform: scale(1.5) rotateZ(354deg);
  -webkit-transform: scale(1.5) rotateZ(354deg);
  z-index: 7;
}
#list4 li:nth-child(8) {
  width: 16.9375rem;
  height: 34.625rem;
  left: 17.5rem;
  top: -0.9375rem;
  /*background: url(../img/bi.png) no-repeat;*/
  background-size: 100% 100%;
  z-index: 8;
}
#list4 li:nth-child(9) {
  width: 4.875rem;
  height: 10.0625rem;
  bottom: -20%;
  left: 1.875rem;
  /*background: url(../img/back.png);*/
  background-size: 100% 100% ;
  z-index: 9;
  animation: rotate 3s infinite;
  -webkit-animation: rotate 3s infinite;
}
#list4 li:nth-child(10) {
  width: 4.875rem;
  height: 10.75rem;
  bottom: -20%;
  left: 6.875rem;
  /*background: url(../img/next.png);*/
  background-size: 100% 100% ;
  z-index: 10;
  animation: rotate 3s infinite;
  -webkit-animation: rotate 3s infinite;
}
#page_five {
  width: 100%;
  height: 100%;
  background-size: 100% 100% ;
  position: relative;
  overflow: hidden;
}
#page5 {
  height: 100%;
}
#list5 {
  width: 100%;
  height: 100%;
}
#list5 li {
  position: absolute;
  display: none;
  opacity: 0;
}
#list5 li:nth-child(2) {
  width: 19.75rem;
  height: 23.1875rem;
  left: 2.625rem;
  transition: 2s;
  /*background: url(../img/dan3.png);*/
  background-size: 100% 100%;
  top: 5.125rem;
  z-index: 1;
}
#list5 li:nth-child(1) {
  width: 26.3125rem;
  height: 38.75rem;
  left: -4.5625rem;
  transition: 3s ;
  /*background: url(../img/chuan2.jpeg);*/
  background-size: 100% 100%;
  top: -3.125rem;
  z-index: 1;
}
#list5 li:nth-child(3) {
  width: 15.875rem;
  height: 5.0625rem;
  left: 21.875rem;
  opacity: 1;
  top: 18.75rem;
  z-index: 3;
}
#list5 li:nth-child(4) {
  width: 23.875rem;
  height: 36.625rem;
  left: -1.8125rem;
  top: -0.0625rem;
  transition: 4s;
  /*background: url(../img/hou2.png);*/
  background-size: 100% 100%;
  z-index: 4;
}
#list5 li:nth-child(5) {
  width: 26.25rem;
  height: 39.625rem;
  left: -2.375rem;
  top: -5.9375rem;
  /*background: url(../img/bg6.png);*/
  transform: rotateZ(345deg) scale(1.5);
  -webkit-transform: rotateZ(345deg) scale(1.5);
  background-size: 100% 100%;
  z-index: 5;
}
#list5 li:nth-child(6) {
  width: 16.9375rem;
  height: 34.625rem;
  left: 18.125rem;
  top: -0.8125rem;
  /*background: url(../img/bi.png);*/
  background-size: 100% 100%;
  z-index: 6;
}
#list5 li:nth-child(7) {
  width: 4.875rem;
  height: 10.0625rem;
  bottom: -20%;
  left: 10.3125rem;
  /*background: url(../img/back.png);*/
  background-size: 100% 100% ;
  z-index: 7;
  animation: rotate 3s infinite;
  -webkit-animation: rotate 3s infinite;
}
#list5 li:nth-child(8) {
  width: 4.8125rem;
  height: 10.75rem;
  bottom: -20%;
  left: 14.75rem;
  /*background: url(../img/next.png);*/
  background-size: 100% 100% ;
  z-index: 8;
  animation: rotate 3s infinite;
  -webkit-animation: rotate 3s infinite;
}
#page_six {
  width: 100%;
  height: 100%;
  background-size: 100% 100% ;
  position: relative;
  overflow: hidden;
}
#page6 {
  height: 100%;
}
#list6 {
  width: 100%;
  height: 100%;
}
#list6 li {
  position: absolute;
  display: none;
  opacity: 0;
}
#list6 li:nth-child(1) {
  width: 41.4375rem;
  height: 100%;
  left: -28.25rem;
  top: 0rem;
  /*background: url(../img/dan4.png) no-repeat;*/
  background-size: 100% 100%;
  z-index: 1;
}
#list6 li:nth-child(2) {
  width: 25.4375rem;
  height: 26rem;
  left: -17.875rem;
  bottom: -15%;
  /*background: url(../img/dan2.png) no-repeat;*/
  background-size: 100% 100%;
  z-index: 2;
}
#list6 li:nth-child(3) {
  width: 13.25rem;
  height: 5.625rem;
  top: 2.5rem;
  left: 3.5rem;
  transition: 2s 1s;
  z-index: 3;
}
#list6 li:nth-child(4) {
  width: 23.4375rem;
  height: 100%;
  left: -1.625rem;
  top: 0rem;
  transition: 4s;
  /*background: url(../img/hou3.png) no-repeat;*/
  background-size: 100% 100%;
  z-index: 4;
}
#list6 li:nth-child(5) {
  width: 26.25rem;
  height: 39.625rem;
  left: -2.125rem;
  top: -5.9375rem;
  /*background: url(../img/bg9.png) no-repeat;*/
  background-size: 100% 100%;
  transform: rotateZ(17deg) scale(1.5);
  -webkit-transform: rotateZ(17deg) scale(1.5);
  z-index: 5;
}
#list6 li:nth-child(6) {
  width: 16.9375rem;
  height: 34.625rem;
  left: 17.75rem;
  top: 0.375rem;
  /*background: url(../img/bi.png) no-repeat;*/
  background-size: 100% 100%;
  z-index: 6;
}
#list6 li:nth-child(7) {
  width: 4.875rem;
  height: 10.0625rem;
  bottom: -20%;
  left: 1.875rem;
  /*background: url(../img/back.png);*/
  background-size: 100% 100% ;
  z-index: 7;
  animation: rotate 3s infinite;
  -webkit-animation: rotate 3s infinite;
}
#list6 li:nth-child(8) {
  width: 4.8125rem;
  height: 10.75rem;
  bottom: -20%;
  left: 6.875rem;
  /*background: url(../img/next.png);*/
  background-size: 100% 100% ;
  z-index: 8;
  animation: rotate 3s infinite;
  -webkit-animation: rotate 3s infinite;
}
#page_seven {
  width: 100%;
  height: 100%;
  background-size: 100% 100% ;
  position: relative;
  overflow: hidden;
}
#page7 {
  height: 100%;
}
#list7 {
  width: 100%;
  height: 100%;
}
#list7 li {
  position: absolute;
  display: none;
  opacity: 0;
}
#list7 li:nth-child(1) {
  width: 34.75rem;
  height: 110%;
  left: -8.625rem;
  top: 0rem;
  transition: 2s;
  /*background: url(../img/dan6.png) no-repeat;*/
  background-size: 100% 100%;
  z-index: 1;
}
#list7 li:nth-child(2) {
  width: 14.1875rem;
  height: 16.75rem;
  left: 4.0625rem;
  top: 14.5rem;
  transition: 1s;
  transform: rotateY(-90deg);
  -webkit-transform: rotateY(-90deg);
  /*background: url(../img/dan7.png) no-repeat;*/
  background-size: 100% 100%;
  z-index: 2;
}
#list7 li:nth-child(3) {
  width: 1.4375rem;
  height: 3.875rem;
  left: 11.75rem;
  top: 0.125rem;
  z-index: 3;
  transition: 2s;
  transform: rotateY(-90deg);
  -webkit-transform: rotateY(-90deg);
}
#list7 li:nth-child(4) {
  width: 1.4375rem;
  height: 10.375rem;
  left: 13.25rem;
  top: 0.125rem;
  z-index: 4;
  transition: 2s;
  transform: rotateY(-90deg);
  -webkit-transform: rotateY(-90deg);
}
#list7 li:nth-child(5) {
  width: 1.4375rem;
  height: 8.75rem;
  left: 10rem;
  top: 0.125rem;
  z-index: 5;
  transition: 2s;
  transform: rotateY(-90deg);
  -webkit-transform: rotateY(-90deg);
}
#list7 li:nth-child(6) {
  width: 23.4375rem;
  height: 100%;
  left: -1.625rem;
  transition: 3s;
  top: 0rem;
  /*background: url(../img/hou4.png) no-repeat;*/
  background-size: 100% 100%;
  z-index: 6;
}
#list7 li:nth-child(7) {
  width: 26.25rem;
  height: 39.625rem;
  left: -0.3125rem;
  top: -4.25rem;
  /*background: url(../img/bg7.png) no-repeat;*/
  background-size: 100% 100%;
  transform: rotateZ(10deg) scale(1.5);
  -webkit-transform: rotateZ(10deg) scale(1.5);
  z-index: 7;
}
#list7 li:nth-child(8) {
  width: 16.9375rem;
  height: 34.625rem;
  left: 17.75rem;
  top: 0.375rem;
  /*background: url(../img/bi.png) no-repeat;*/
  background-size: 100% 100%;
  z-index: 8;
}
#list7 li:nth-child(9) {
  width: 4.875rem;
  height: 10.0625rem;
  bottom: -20%;
  left: 1.875rem;
  /*background: url(../img/back.png);*/
  background-size: 100% 100% ;
  z-index: 9;
  animation: rotate 3s infinite;
  -webkit-animation: rotate 3s infinite;
}
#list7 li:nth-child(10) {
  width: 4.8125rem;
  height: 10.75rem;
  bottom: -20%;
  left: 6.875rem;
  /*background: url(../img/next.png);*/
  background-size: 100% 100% ;
  z-index: 10;
  animation: rotate 3s infinite;
  -webkit-animation: rotate 3s infinite;
}
#page_eight {
  width: 100%;
  height: 100%;
  background-size: 100% 100% ;
  position: relative;
  overflow: hidden;
}
#page8 {
  height: 100%;
}
#list8 {
  width: 100%;
  height: 100%;
}
#list8 li {
  position: absolute;
  display: none;
  opacity: 0;
}
#list8 li:nth-child(1) {
  width: 23.5rem;
  height: 100%;
  left: -1.75rem;
  top: 0rem;
  transition: 1.5s;
  /*background: url(../img/chuan.jpeg) no-repeat;*/
  background-size: 100% 100%;
  z-index: 1;
}
#list8 li:nth-child(2) {
  width: 14.875rem;
  height: 5.0625rem;
  left: 1.75rem;
  top: 1.875rem;
  transition: 1.5s;
  z-index: 2;
}
#list8 li:nth-child(3) {
  width: 25.25rem;
  height: 19.875rem;
  left: -3rem;
  top: 12.625rem;
  transition: 1.5s;
  /*background: url(../img/dan1.png) no-repeat;*/
  background-size: 100% 100%;
  z-index: 3;
}
#list8 li:nth-child(4) {
  width: 23.5rem;
  height: 100%;
  left: -1.5625rem;
  top: 0rem;
  transition: 4s;
  /*background: url(../img/hou5.png) no-repeat;*/
  background-size: 100% 100%;
  z-index: 4;
}
#list8 li:nth-child(5) {
  width: 26.25rem;
  height: 39.625rem;
  left: -2rem;
  top: -5.625rem;
  transform: scale(1.5);
  /*background: url(../img/bg4.png) no-repeat;*/
  background-size: 100% 100%;
  z-index: 5;
}
#list8 li:nth-child(6) {
  width: 16.9375rem;
  height: 34.625rem;
  left: 17.75rem;
  top: 0.375rem;
  /*background: url(../img/bi.png) no-repeat;*/
  background-size: 100% 100%;
  z-index: 6;
}
#list8 li:nth-child(7) {
  width: 4.875rem;
  height: 10.0625rem;
  bottom: -20%;
  left: 1.875rem;
  /*background: url(../img/back.png);*/
  background-size: 100% 100% ;
  z-index: 9;
  animation: rotate 3s infinite;
  -webkit-animation: rotate 3s infinite;
}
#list8 li:nth-child(8) {
  width: 4.8125rem;
  height: 10.75rem;
  bottom: -20%;
  left: 6.875rem;
  /*background: url(../img/next.png);*/
  background-size: 100% 100% ;
  z-index: 8;
  animation: rotate 3s infinite;
  -webkit-animation: rotate 3s infinite;
}
#page_nine {
  width: 100%;
  height: 100%;
  /*background: url(../img/bg11.jpg) no-repeat;*/
  background-size: 100% 100% ;
  position: relative;
  overflow: hidden;
}
#page9 {
  height: 100%;
}
#list9 {
  width: 100%;
  height: 100%;
}
#list9 li {
  position: absolute;
  display: none;
  opacity: 0;
}
#list9 li:nth-child(1) {
  width: 23.375rem;
  height: 100%;
  left: -1.75rem;
  top: -5rem;
  transition: 1s;
  /*background: url(../img/hou6.png) no-repeat;*/
  background-size: 100% 100%;
  z-index: 1;
}
#list9 li:nth-child(2) {
  width: 23.5rem;
  height: 100%;
  left: -1.75rem;
  bottom: -5rem;
  transition: 1s;
  /*background: url(../img/xiabai.png) no-repeat;*/
  background-size: 100% 100%;
  z-index: 2;
}
#list9 li:nth-child(3) {
  width: 8.9375rem;
  height: 8.9375rem;
  left: 0.9375rem;
  top: 8.9375rem;
  transition: 1s;
  transform: rotateZ(349deg);
  -webkit-transform: rotateZ(349deg);
  /*background: url(../img/gf.gif) no-repeat;*/
  background-size: 100% 100%;
  z-index: 3;
}
#list9 li:nth-child(4) {
  width: 8.9375rem;
  height: 8.9375rem;
  left: 11rem;
  transition: 1s;
  top: 8.9375rem;
  transform: rotateZ(8deg);
  -webkit-transform: rotateZ(8deg);
  /*background: url(../img/gf.gif) no-repeat;*/
  background-size: 100% 100%;
  z-index: 4;
}
#list9 li:nth-child(5) {
  width: 12.5rem;
  height: 3.75rem;
  left: 3.125rem;
  top: 16.25rem;
  transition: 1s;
  transform: rotateZ(15deg);
  -webkit-transform: rotateZ(15deg);
  /*background: url(../img/zi1.png) no-repeat;*/
  background-size: 100% 100%;
  z-index: 10;
}
#list9 li:nth-child(6) {
  width: 12.5rem;
  height: 17.875rem;
  left: -0.75rem;
  top: 13.375rem;
  transition: 1s;
  transform: rotateZ(349deg);
  -webkit-transform: rotateZ(349deg);
  /*background: url(../img/bg2.png) no-repeat;*/
  background-size: 100% 100%;
  z-index: 6;
}
#list9 li:nth-child(7) {
  width: 12.5rem;
  height: 17.875rem;
  left: 9.25rem;
  top: 14.125rem;
  transition: 1s;
  transform: rotateZ(8deg);
  -webkit-transform: rotateZ(8deg);
  /*background: url(../img/chuan11.png) no-repeat;*/
  background-size: 100% 100%;
  z-index: 7;
}
#list9 li:nth-child(8) {
  width: 4.8125rem;
  height: 10.75rem;
  bottom: -23%;
  left: 6.875rem;
  /*background: url(../img/back.png);*/
  background-size: 100% 100% ;
  z-index: 8;
  animation: rotate 3s infinite;
  -webkit-animation: rotate 3s infinite;
}